<script>
import { reactive } from "vue";
export default {
  name: "toast",
};

const toastEffect = () => {
  const toastData = reactive({
    isShow: false,
    msg: "",
  });

  const showToast = (msg, ms = 500) => {
    toastData.msg = msg;
    toastData.isShow = true;
    setTimeout(() => {
      toastData.isShow = false;
      toastData.msg = "";
    }, ms);
  };

  return { toastData, showToast };
};

export { toastEffect };
</script>

<script setup>
import { defineProps } from "vue";
const props = defineProps({ msg: String });
</script>

<template>
  <div class="toast">{{ msg }}</div>
</template>

<style lang="scss" scoped>
.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  min-height: 0.4rem;
  min-width: 1rem;
  padding: 0 0.2rem 0 0.2rem;
  border-radius: 0.1rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.16);
  border: solid 0.01rem #7f7f7f;
  color: #fff;
}
</style>
